
<% String title="Histogram stylesheet ";
   String header=title;
%>


<%@ include file="sangerheader.jsp" %>
<div id="main">
 
 <p>
This page is part of the <a href="spec_1.53E.jsp">DAS 1.53E specification</a>
</p>
 
 <h2>Documentation Histogram Stylesheet conventions</h2>

<h3>General covnentions</h3>
<p>
The score field in the feature response is translated by a DAS client into the actual 
display color and height.  The scores are scaled where the minimal score is assigned COLOR1
and the maximum score is assigned COLOR2 (COLOR3 for gradients based on three colors). 

For chromosomal coordinates where the global MAX or MIN value might occur in a region 
of the chromosome, which is  not part of a DAS response the (optional) MIN and MAX fields 
allow to specify these range by default. If the features contain values that are larger than 
the maximum or smaller than the minimum values, these will be displayed with the same
 height as the maximum or minimum score.


</p>

<b>Reference</b>
<jsp:include page="reference.jsp"/>

<p>


A typical stylesheet  looks like this:
</p>

<pre>
&lt;?xml version="1.0" standalone="yes"?>
&lt;DASSTYLE>
  &lt;STYLESHEET>
    &lt;CATEGORY id="[whatever]">
      &lt;TYPE id="<i>[Feature Type]</i>">
        &lt;GLYPH>
         &lt;GRADIENT>
	  	 &lt;COLOR1>#000000&lt;/COLOR1>
	  	 &lt;COLOR2>#999999&lt;/COLOR2>
	  	 &lt;COLOR3>#FFFFFF&lt;/COLOR3>
		 &lt;MIN>-123&lt;/MIN>
		 &lt;MAX>123&lt;/MAX>
		 &lt;STEPS>3&lt;/STEPS>
        &lt;/GRADIENT>
       &lt;/GLYPH>
      &lt;/TYPE>     
    &lt;/CATEGORY>
  &lt;/STYLESHEET>
&lt;/DASSTYLE>
</pre>


The GRADIENT element defines which kind of display should be chosen. 
Currently supported are:
<ul>
<li>GRADIENT  - a color gradient where each sequence position has the same height.
<img src="img/colorgradient.jpg"/></li>

<li>HISTOGRAM - Each sequence position has a height depending on the feature score. 
An example where the minimum score has a height of 0: 
<img src="img/histogram.jpg"/> <br/>

Here a histogram with negative values. Note how the negative scores are plotted as bars
 below  0.

<img src="img/signalmap.jpg"/> <br/>
</li>

<li>LINEPLOT  - displaying a function line. Note how this example  displays an overlay of 2 functions.
This can be done by providing  features of two different types.

<img src="img/function.jpg"/> <br/>
</li>

<li>TILING   - display of tiling array data. This is essentially the same as a histogram with negative values,
but there is some performance gains to be made in ensembl by specifying this as a separate type.

<img src="img/tiling.jpg"/>
</li>
</ul>


<p>COLOR1, COLOR2, COLOR3 allow to specify the colors used for the values of the 
gradient. Color gradients based on two or three colors are supported.
If COLOR1 and COLOR2/3 are identical, or COLOR2/3 are not specified,
no gradient will be displayed and all sequence positions will have the same color.
</p>

<p>MAX and MIN (optional) are the largest and smallest score that should be used for the coloring. 
MIN corresponds to COLOR1 and MAX corresponds to COLOR3 (COLOR2 if gradient is based on two colors).
</p>

<p>STEPS (optional) allows to specify the number of steps used in a color gradient.


<h2>Truncation of exceeding scores</h2>
<p>
If the features contain scores that are >= MAX then their display height gets trunkated. The 
color will be the same as for MAX. The same principle applies also to scores that 
are <= MIN, which will have the same coloring and height as well.
</p>

<h2>Feature types per track</h2>
<p>For most CATEGORY types only one feature type per track will be displayed. The only exception is <i>function</i>
where it is possible to overlay 2 different functions in one line, see example above.
</p>


<h2>SPICE examples</h2>
<p>Here some examples how SPICE draws Histogram data. In SPICE the display for TILING data is identical with the HISTOGRAM style. </p>

<table border="0">

<tr><td valign="top">GRADIENT</td><td><img src="img/spice_gradient.jpg"/></td></tr>
<tr><td valign="top">HISTOGRAM (positive values)</td><td><img src="img/spice_histo.jpg"/></td></tr>
<tr><td valign="top">HISTOGRAM (negative & positive values)</td><td><img src="img/spice_histo_pm.jpg"/></td></tr>
<tr><td valign="top">LINEPLOT (positive values)</td><td><img src="img/spice_lineplot.jpg"/></td></tr>
<tr><td valign="top">LINEPLOT (negative & positive values)</td><td><img src="img/spice_lineplot_pm.jpg"/></td></tr>

</table>

Some more examples for SPICE are available from <a href="http://www.dasregistry.org/spice/histogram.shtml">the SPICE website</a>.



</div>

<%@ include file="sangerfooter.jsp" %>
